<script setup>
/**
 * name：
 * user：sa0ChunLuyu
 * date：2022-05-24 14:48:31
 */
import {useStore, useConfig} from "~/store";
import {isDark, toggleDark, isFull, toggleFull} from '~/composables'
import $router from "~/router";
import {$image} from '~/api'

const $store = useStore()
const $config = useConfig()
const layout_header_wrapper_height = computed(() => {
  return `${$config.value.layout.header}px`
})
const options = [{
  label: '个人设置',
  key: 'set',
  props: {
    onClick: () => {
      $router.push({
        name: 'admin-info'
      })
    }
  }
}, {
  label: '退出登录',
  key: "quit",
  props: {
    onClick: () => {
      $router.push({
        name: 'login'
      })
    }
  }
}]
</script>
<template>
  <div class="user_wrapper">
    <n-button text @click="toggleFull()" mr-5>
      <div class="user_button_icon_wrapper" v-if="isFull" i-ic-baseline-fullscreen-exit></div>
      <div class="user_button_icon_wrapper" v-else i-ic-baseline-fullscreen></div>
    </n-button>
    <n-button text @click="toggleDark()" mr-5>
      <div class="user_button_icon_wrapper" v-if="isDark" i-ic-baseline-dark-mode></div>
      <div class="user_button_icon_wrapper" v-else i-ic-baseline-light-mode></div>
    </n-button>
    <div mr-5>
      <n-dropdown trigger="hover" :options="options">
        <n-space align="center">
          <n-avatar round :size="40" class="avatar_wrapper" :src="$image($store.config.logo)"
                    :fallback-src="$image($store.config.logo)"/>
          <span>{{ $store.admin_info ? $store.admin_info.nickname : $store.config.title }}</span>
        </n-space>
      </n-dropdown>
    </div>
  </div>
</template>
<style scoped>
.avatar_wrapper {
  background: #ffffff;
}

.user_button_icon_wrapper {
  font-size: 20px;
}

.user_wrapper {
  position: absolute;
  right: 0;
  top: 0;
  height: v-bind(layout_header_wrapper_height);
  display: flex;
  align-items: center;
}
</style>
